<template>
    <view class="wrap" @click="itemClick">
		<view class="warp-box" style="display: flex;">
			<view class="cover">
			    <image :src="itemData.modelUrl | mmvImageUrl" mode="aspectFill"></image>
			</view>
			<view class="content">
			    <!-- <view> -->
			        <view class="title">{{filterNull(itemData.brandName)+" "+filterNull(itemData.seriesName)}}</view>
					<view class="car-type">{{filterNull(itemData.modelName)}}</view>
				   <!-- <view class="tags" v-if="itemData.tagNames">
			            <view class="tag" v-for="(tagItem, tagIndex) in strSplit(itemData.tagNames)" :key="tagIndex">
			                {{tagItem}}
			            </view>
			        </view> -->
	
					<view>
						<!-- <text class="populer" v-if="isHot">热门</text> -->
						<text v-for="(hotItem, hotIndex) in hotTags" :key="hotIndex" class='other-stl' :class="{'populer':hotItem=='推荐奖励'}" @click.stop="tagClick(hotItem)">
						    {{hotItem}}
						</text>
					</view>
					<view class="last">
					   <!-- <view class="desc">说明：{{filterNull(itemData.carModelRemark)}}</view> -->
					
					    <view class="last-box" v-if="itemData.schemeType==2||itemData.schemeType==3||itemData.schemeType==4">
					
							<!-- <view class="price">{{itemData.schemeType==2?"首付款":itemData.schemeType==4?"首付":"保证金"}}：¥{{filterNull(itemData.busAmount)}}起</view> -->
							<view class="price">
								<text class="price-text">{{itemData.schemeType==2?"月租":'月还款'}}：¥ </text>
								<text class='price-befor'>{{filterNull(itemData.monthlyRent)}}</text>
								<text class="price-text">起 </text>
								<!-- <text class='price-after'>¥{{filterNull(itemData.monthlyRent)}}</text> -->
							</view>
							<view class="price" v-if="itemData.schemeTypeStr=='以租代购'">
								<text class='price-after'>
									首付款：¥{{filterNull(itemData.busAmount)}}起
								</text>
							</view>
						</view>
					
					</view>
			    <!-- </view> -->
			  
			</view>
		</view>
		
    </view>
</template>

<script>
export default {
    props: {
        itemData: {
            type: Object,
            default: () => { }
        },
        //是否是试驾列表
        isTestDrive: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        isHot() {
            return this.itemData.isPopularCarRental == 0 && this.itemData.schemeType != 1;
        },
        hotTags() {
            var tags = [];

            if (this.itemData.yxFlag > 0) {
                tags.push('推荐奖励')
            }

            // if (this.itemData.isPopularCarRental == 0 && this.itemData.schemeType != 1) {
            //     tags.push('热门')
            // }

            if (this.itemData.schemeTypeStr) {
                tags.push(this.itemData.schemeTypeStr)
            }

            if (this.isTestDrive && this.itemData.sourceDriverCount) {
                tags.push(this.itemData.sourceDriverCount + "人试驾")
            }

            return tags;
        }
    },
    methods: {
        itemClick() {
            this.$emit('itemClick');
        },

        strSplit(str) {
            if (str !== '' && str != undefined) {
                return str.split(',')
            } else {
                return []
            }
        },

		tagClick(text){
			if(text=='推荐奖励'){
				uni.showModal({
					content:this.itemData.yxStr,
					showCancel:false
				})
			}
		}

    }
}
</script>

<style lang="scss" scoped>
.wrap {
    min-height: 285upx;
    padding: 16px;
    box-sizing: border-box;
    margin-bottom: 12px;
    background: #fff;
	display: flex;
	flex-direction: column;
}
.warp-box{
	display: flex;
	justify-content: flex-start;
}

.tag {
    padding: 0 14upx;
    line-height: 44upx;
    background: #eb314f;
    background: #ffad1f;
    border-radius: 6upx;
    font-size: 20upx;
    font-weight: bold;
    color: #fff;

    & + & {
        margin-left: 10upx;
    }
}

.hot {
    flex-shrink: 0;
    position: absolute;
    left: 0;
    top: 37upx;
    z-index: 2;
    border-radius: 0px 6px 6px 0px;
}

.cover {
    width: 228upx;
    height: 176upx;
    // height: 100%;

    image {
        width: 100%;
        height: 100%;
        border-radius: 10upx;
    }

    .num {
        // width: 121px;
        line-height: 34upx;
        text-align: center;
        border: 1upx solid #bebebe;
        border-radius: 2upx;
        font-size: 20upx;
        font-weight: bold;
        color: #232323;
        position: absolute;
        top: 32upx;
        right: 0;
        background: #fff;
        padding: 0 11upx;
    }
}

.content {
    box-sizing: border-box;
	margin-left: 12px;
    height: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;

    .tags {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
  //       height: 100upx;
		// min-height: 26rpx;
        // margin-top: 4upx;
        // overflow: hidden;

        .tag {
            margin-top: 5upx;
            height: 43upx;
            background-color: #009B01;
        }

        .tag:nth-child(even) {
            background: #f17559;
        }
    }

    .title {
        font-size: 16px;
        color: #000000;
		margin-bottom: 8px;
		font-weight: bold;
    }
	.car-type{
		font-size: 12px;
		color: #999999;
		margin-bottom: 8px;
		max-width:400upx;
	}

    .desc {
        font-size: 20upx;
        font-weight: bold;
        color: #999;
		margin-top: 6rpx;
    }

  
}
.last{
	margin-top:8upx;
	.last-box{
		display: flex;
		flex-direction: column;
		.price {
		      font-size: 22upx;
		      color: #ff6a15;
			  margin-top: 8rpx;
			  .price-befor{
				  color:#FF6A15 ;
				  font-size:28upx ;
				  font-weight: bold;
			  }
			  .price-text{
				  color:#FF6A15 ;
			  }
			  .price-after{
				  colro:#999999;
				  font-size:20upx ;
			  }
		  }
	}
	
	
}
 .populer {
        font-size: 10px;
		color:#479427;
		padding:2px 8px;
		border:1px solid #479427;
		border-radius: 2px;
    }
.other-stl{
	font-size: 10px;
	color:#173B42;
	padding:2px 8px;
	border:1px solid #173B42;
	border-radius: 2px;
	margin-left:8px ;
}
	
.hot-tags {
    position: absolute;
    top: 22upx;
    left: -5upx;
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 310upx;

    text {
        @include flex;
        align-items: center;
        flex-wrap: wrap;
        line-height: 43upx;
        margin: 10upx 10upx 0 0;
        padding: 0 10upx;
        border-radius: 6upx;
        font-size: 20upx;
        color: $white;
        // background-color: #eb314f;
        background: #ff6a15;
    }

   

    text:first-child {
        border-radius: 0 6upx 6upx 0;
    }

    // text:nth-child(even) {
    //     background: #ffad1f;
    // }
}

.green {
    background: #009B01;
}

.red {
    background: #469428;
}

.yellow {
    background: #f17559;
}
</style>
